<template>
  <div class="context">
    <div class="top">
      <div class="info">
        <div class="name">用户名：{{ userInfo.username }}</div>
        <div class="name">手机号：{{ userInfo.phone }}</div>
        <div class="name">
          身份：{{ userInfo.sta === 0 ? "管理员" : "普通用户" }}
        </div>
      </div>
      <div class="nav">
        <li>我的订单</li>
      </div>
    </div>
    <div class="order">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="订单ID" width="180" />
        <el-table-column prop="movie" label="电影信息">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <img
                style="width: 50px; height: 50px; border-radius: 5px"
                :src="scope.row.movie.imgUrl"
              />
              {{ scope.row.movie.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="event" label="场次信息">
          <template #default="scope">
            <div>
              <div>票价：{{ scope.row.event.fare }}</div>
              <div>放映时间：{{ Time(scope.row.event.show_time) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Selseat" label="所选座位号" />
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              :disabled="scope.row.statu !== 1"
              @click="
                handleEdit(scope.row.id, scope.row.event_id, scope.row.Selseat)
              "
              >支付</el-button
            >
            <el-button
              type="danger"
              :disabled="scope.row.status === 1"
              @click="handleDel(scope.row.id)"
              >取消订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import useUser from "@/store/user";
import { useRouter } from "vue-router";
import { orderGet, orderPay, orderCancel } from "@/api/v2";
import { Try, Time } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const userStore = useUser();
const userInfo = ref({});
const tableData = ref([]);
const getlist = () => {
  Try(async () => {
    const user_id = userInfo.value.id;
    const res = await orderGet(user_id);
    console.log(res);
    if (res.code == 200) {
      tableData.value = res.data;
    } else {
      ElMessage.error(res.message);
    }
  });
};
const handleEdit = (id, event_id, Selseat) => {
  Try(() => {
    ElMessageBox.confirm("确定支付订单?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const res = await orderPay({ id, event_id, Selseat });
      if (res.code == 200) {
        ElMessage.success("支付成功");
        getlist();
      } else {
        ElMessage.error(res.message);
      }
    });
  });
};
const handleDel = (id) => {
  Try(() => {
    ElMessageBox.confirm("确定取消订单?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const res = await orderCancel(id);
      if (res.code == 200) {
        ElMessage.success(res.message);
        getlist();
      } else {
        ElMessage.error(res.message);
      }
    });
  });
};
onMounted(() => {
  if (!userStore.info.id) {
    router.push("/login");
  } else {
    userInfo.value = userStore.info;
  }
  getlist();
});
</script>
<style scoped>
.context {
  width: 80%;
  margin: 0 auto;
}
.top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.info {
  width: 250px;
  height: 100px;
  box-shadow: 0px 0px 10px #888888;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
}
.nav {
  width: calc(100% - 280px);
  height: 100px;
  box-shadow: 0px 0px 10px #888888;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.nav li {
  list-style: none;
  font-weight: bold;
  font-size: 20px;
}
.order {
  width: 100%;
  margin-top: 10px;
  box-shadow: 0px 0px 10px #888888;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
}
</style>
